<!--
 * @Author: g05047
 * @Date: 2022-02-18 19:50:34
 * @LastEditors: g05047
 * @LastEditTime: 2022-02-23 16:04:15
 * @Description: file content
-->
<template>
  <div class="personCollection-page">
    <h2>核酸采样详情</h2>
    <div class="person-info" v-if="personCollectionInfo">
      <el-row>
        <el-col :span="12">
          <span>姓名：{{ personCollectionInfo.thename }}</span>
        </el-col>
        <el-col :span="12">
          <span>手机号码：{{ personCollectionInfo.mobile }}</span>
        </el-col>
        <!-- <el-col :span="4"> </el-col> -->
      </el-row>
      <el-row>
        <el-col :span="24">
          <span>
            工作单位：[{{ personCollectionInfo.bodyindustry }}]
            {{ personCollectionInfo.unitName }}
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span>采样日期：{{ personCollectionInfo.actualdate }}</span>
        </el-col>
        <el-col :span="12">
          <span>计划日期：{{ personCollectionInfo.planneddate }}</span>
        </el-col>
        <!-- <el-col :span="6"> </el-col> -->
      </el-row>
      <el-row>
        <el-col :span="12">
          <span
            >采样区域街道：{{
              personCollectionInfo.samplingPointDistrictName || "--"
            }}{{ personCollectionInfo.samplingPointStreetName }}</span
          >
        </el-col>
        <el-col :span="12">
          <span> 采样点：{{ personCollectionInfo.samplingpoint }} </span>
        </el-col>
        <!-- <el-col :span="6"> </el-col> -->
      </el-row>
      <el-row>
        <el-col :span="12">
          <span>社区：{{ personCollectionInfo.communityName || "--" }}</span>
        </el-col>
        <el-col :span="12">
          <span>
            采样填报：
            <label
              :class="
                personCollectionInfo.status.indexOf('如期') !== -1
                  ? 'green'
                  : 'red'
              "
            >
              {{ personCollectionInfo.status }}
            </label>
          </span>
        </el-col>
        <!-- <el-col :span="6"> </el-col> -->
      </el-row>
      <el-row>
        <el-col :span="12">
          <span>
            填报者：
            {{
              personCollectionInfo.informant === ""
                ? "--"
                : personCollectionInfo.informant
            }}
          </span>
        </el-col>
        <el-col :span="12">
          <span>
            填报日期：
            {{
              personCollectionInfo.informantTime === ""
                ? "--"
                : personCollectionInfo.informantTime
            }}
          </span>
        </el-col>
        <!-- <el-col :span="6"> </el-col> -->
      </el-row>

      <el-row v-if="tubebarCodeData.length" class="green">
        <el-col :span="12">
          <span>
            检测机机构：
            {{ tubebarCodeData[0].laboratory }}
          </span>
        </el-col>
        <el-col :span="12">
          检测结果：<span class="green">
            {{ tubebarCodeData[0].result }}({{tubebarCodeData[0].resulttime}})
          </span>
        </el-col>
        <!-- <el-col :span="6"> </el-col> -->
      </el-row>

      <el-row>
        <el-col :span="24">
          <span>核酸采样证明：</span>
        </el-col>
      </el-row>
      <el-row>
        <el-image
          v-if="personCollectionInfo.fileUrl !== ''"
          fit="contain"
          style="width: 200px; margin-top: 10px"
          :src="personCollectionInfo.fileUrl"
          :preview-src-list="[personCollectionInfo.fileUrl]"
        >
        </el-image>
        <span v-else style="color: grey"> 暂无采样证明 </span>
      </el-row>
    </div>
  </div>
</template>

<script>
//
import { findHcNucleicAcidReport } from "@/api/modules/coldLink";
export default {
  props: {
    personCollectionInfo: {
      Type: Object,
    },
  },
  data() {
    return {
      // personCollectionInfo: {},
      tubebarCodeData: [],
    };
  },
  created() {
    if (this.personCollectionInfo.tubebarCode) {
      this.getNucleicAcidReport();
    }
  },
  mounted() {},
  methods: {
    getNucleicAcidReport() {
      findHcNucleicAcidReport(this.personCollectionInfo).then((res) => {
        this.tubebarCodeData = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.personCollection-page {
  // padding: 10px 20px;
  .person-info {
    // margin-bottom: 20px;
    span {
      display: inline-block;
      margin-top: 15px;
    }
  }
  .red {
    color: red;
  }
  .green {
    color: green;
  }
}
</style>
